﻿@model IEnumerable<XZen.Blogger.Magazine>
@{
    ViewBag.Title = "Index";
    var bookArray = Model.ToArray();
    ViewBag.LeftPanel = "true";
}

<br />
<style>
    .dlg {
        display: none;
    }
</style>
<script type="text/javascript">

    var books = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(bookArray));

    $(function(){
        $("#MainLeftMenu").empty();
        $(books).each( function(i,book){
            var link =  $("<a href='/Magazine/Edit/" + book.ID + "'><i class='icon-notebook'></i> " + book.Title + "</a>");
            var li = $("<li/>").append(link);
            $("#MainLeftMenu").append(li);
        });
    });
</script>
<div id="form_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="icon-paragraph-justify2"></i>
                    <span class="kloutname">Create a Magazine...</span>
                </h4>
            </div>
            <div class="modal-body contextualArea" style="max-height: 600px; padding: 2px;">
                @Html.Partial("_Create", new XZen.Blogger.Magazine())
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title"><i class="icon-book"></i>My Magazines</h6>
        <span class="label  pull-right">
            <input type="button" id="newMagazine" class="newMagazine" value="New" />

            <script type="text/javascript">
                $(function () {
                    $(".newMagazine").click(function () {
                        $("#form_modal").modal('toggle');
                    });
                    $(".submit").click(function () {
                        $(this).mvc({
                            url: "/Magazine/CreateMagazine",
                            success: function (data) {
                                var mag = $.parseJSON(data);;
                                if (mag.HResult) {
                                    alert("Cant create magazine: " + mag.Message);
                                } else {
                                    alert("Created Magazine at " + mag.Title);
                                    window.top.location = "/Magazine/BindBook/" + mag.ID;
                                }
                                $("#form_modal").modal('toggle');
                            },
                            error: function (a, b, c) { alert("error"); }
                        });
                    });
                });


            </script>
        </span>
    </div>
    <div class="panel-body">
        @Html.Partial("_Feedback")
        @for (int ctr = 0; ctr < Model.Count(); )
        {
            <div class="row">
                @for (int i = 0; i < 4 && ctr < Model.Count(); i++, ctr++)
                {
                    var item = bookArray[ctr];
                    <text>
                    @Html.Partial("_BookRow", item)
                    </text>                  
                }

            </div>  
            <hr />
        }
    </div>
</div>

